<template>
  <div class="reservation">
    <van-popup v-model="showes" position="bottom" class="popup">
      <div class="title">
        <p>预定信息</p>
        <van-icon @click="close" name="close" class="icon" />
      </div>
      <!-- 出发日期 -->
      <div class="start-time">
        <div class="label">出发时间</div>
        <van-cell class="time-select" title="选择日期" :value="start_time" @click="dateShow = true" icon="notes-o" />
        <van-calendar v-model="dateShow" @confirm="confirm" color="#63c6c2" :min-date="minDate" :max-date="maxDate" />
      </div>
      <!-- 表单 -->
      <van-form @submit="onSubmit" class="From myForm">
        <!-- 出发城市/人数 -->
        <div class="form-first">
          <div class="start-city">
            <div class="label">出发城市</div>
            <van-field
              scroll-to-error
              colon
              label-width="1.4rem"
              v-model="start_place"
              name="start_place"
              label="出发城市"
              :rules="[{ pattern: /^[\u4e00-\u9fa5]{0,}$/, message: '请填写正确的城市名' }]"
            />
          </div>
          <div class="people">
            <div class="label">选择人数</div>
            <van-field name="people">
              <template #input>
                <van-stepper input-width="1rem" button-size="1rem" v-model="people" />
              </template>
            </van-field>
          </div>
        </div>
        <!-- 联系方式,姓名 -->
        <div class="form-second">
          <div class="phone">
            <div class="label">联系方式</div>
            <van-field
              v-model="phone"
              name="phone"
              type="tel"
              label="手机号:"
              label-width="1.1rem"
              :rules="[{ pattern: /^[1]([3-9])[0-9]{9}$/, message: '格式错误' }]"
            />
          </div>
          <div class="username">
            <div class="label">填写姓名</div>
            <van-field
              v-model="username"
              name="username"
              type="text"
              label="填写姓名:"
              label-width="1.4rem"
              :rules="[{ pattern: /^[\u4E00-\u9FA5]{2,4}$/, message: '格式错误' }]"
            />
          </div>
        </div>
        <!-- 留言 -->
        <div class="mark">
          <div class="label">您的留言</div>
          <van-field
            v-model="user_mark"
            rows="2"
            autosize
            name="user_mark"
            label="留言:"
            type="textarea"
            maxlength="50"
            placeholder="请输入留言"
            show-word-limit
          />
        </div>
        <!-- 确认预约按钮 -->
        <div class="information">
          <div class="price">
            总价:
            <span>{{ price * people }}</span>
            <span>元</span>
          </div>
          <van-button round block type="info" native-type="submit">确认预约</van-button>
        </div>
      </van-form>
    </van-popup>
  </div>
</template>

<script>
// 引入所需组件
import { DropdownMenu, DropdownItem, Calendar, Stepper, Popup } from 'vant';
// 引入提交订单API
import { submitOrder } from '../server/order.js';
// 引入token处理工具
import jwtDecode from 'jwt-decode';

export default {
  components: {
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [Calendar.name]: Calendar,
    [Stepper.name]: Stepper,
    [Popup.name]: Popup,
  },

  directives: {},
  props: ['price', 'gid'],
  data() {
    return {
      // 从浏览器缓存中获取用户信息
      userInfo: localStorage.getItem('token') != null ? jwtDecode(localStorage.getItem('token')) : {},
      showes: false, //控制预定框弹出
      dateShow: false,
      start_time: '', //出发时间
      minDate: new Date(2021, 7, 1), //最小可选日期
      maxDate: new Date(2022, 12, 31), //最大可选日期
      start_place: '', //城市
      people: 1, //人数
      phone: '', //手机号
      username: '', //姓名
      user_mark: '', //留言
    };
  },

  mounted() {},

  methods: {
    // 父组件调用:弹出预定框
    showPopup() {
      this.showes = true;
    },
    // 关闭预定框
    close() {
      this.showes = false;
    },
    //返回日期值
    formatDate(date) {
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    },
    //选择日期
    confirm(date) {
      this.dateShow = false; //关闭日期选择框
      this.start_time = this.formatDate(date); //或得数据
    },
    // 提交按钮
    async onSubmit(values) {
      if (this.userInfo.uid === undefined) {
        this.$toast.fail('未登录,即将为您跳转登录页面');
        await setTimeout(() => {
          this.$router.push('/login');
        }, 1000);
        return;
      }
      // 补齐请求所需数据
      values.uid = this.userInfo.uid;
      values.gid = this.gid;
      values.start_time = this.start_time;
      values.sum = this.people * this.price;
      // 发送请求
      submitOrder(values)
        .then(() => {
          this.showes = false;
          this.$toast.success('预约成功,客服将在24小时内联系您');
        })
        .catch(() => {
          this.showes = false;
          this.$toast.fail('预约失败');
        });
    },
  },
};
</script>

<style lang="scss">
.reservation {
  color: #645854;
  // 单元格公共样式
  .van-cell {
    box-shadow: 0px 0px 1px 0px rgb(85, 85, 85);
    padding: 0.3rem 0.25rem;
    .van-cell__title {
      font-size: 0.32rem;
      color: rgb(121, 119, 119);
      & > span {
        font-size: 0.32rem !important;
      }
    }
  }
  // 公共label样式
  .label {
    margin: 15px auto;
    font-size: 16px;
  }
  // 弹出层
  .popup {
    // 标题
    .title {
      width: 90%;
      margin: 10px auto;
      display: flex;
      justify-content: space-between;
      align-items: center;

      p {
        font-size: 0.7rem;
        color: #645854;
      }

      .icon {
        font-size: 0.5rem;
        color: #b3b2b2;
      }
    }
  }

  // 日期选择
  .start-time {
    width: 90%;
    margin: 10px auto;

    .time-select {
      box-shadow: 0px 0px 1px 0px #555555;
      width: 100%;
      padding: 0.3rem 0.25rem;
    }
  }
  // 表单内容
  .myForm {
    width: 90%;
    margin: 10px auto;

    // 出发城市,人数
    .form-first {
      width: 100%;
      display: flex;
      justify-content: space-between;

      .start-city {
        width: 50%;
      }

      .people {
        width: 40%;

        .van-cell {
          box-shadow: none;
          padding: 0;

          .van-stepper__input,
          .van-stepper__minus,
          .van-stepper__plus {
            background-color: transparent;
            border: 1px solid darkgray;
          }

          input:-webkit-autofill {
            -webkit-box-shadow: 0 0 0 1000px white inset !important;
            font-size: 0.4rem;
          }
        }
      }
    }

    // 联系方式,姓名
    .form-second {
      width: 100%;
      display: flex;
      justify-content: space-between;

      .phone {
        width: 50%;
      }
      .username {
        width: 40%;
      }
    }

    // 提交
    .information {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;

      .price {
        font-size: 0.5rem;
        font-weight: 600;

        & > span:nth-child(1) {
          color: #645854;
          font-weight: 900;
          font-size: 0.6rem;
        }

        & > span:nth-child(2) {
          display: inline-block;
        }
      }

      // 提交按钮
      .van-button--info {
        background-color: #63c6c2;
        border: 1px solid #63c6c2;
        width: 35%;
      }
    }
  }
}
</style>
